<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

let line = ref()  // 获取 组件实例

onMounted(() => {
    // 初始化echarts
    let mycharts = echarts.init(line.value)
    mycharts.setOption({
        title: {
            text: '游客访问量',
            textStyle: {
                color: '#29fcff',
            },
            left: '40%',
        },
        xAxis: {
            type: 'category',  // 设置数据点在x轴均匀分布
            boundaryGap: false,  // 设置两侧不留白
            axisLine:{
                show:true,  // 显示x轴线
            },
            axisTick:{show:true},  // 显示刻度
            // lineStyle:{  // 设置轴线的样式
            //     color:'white',
            //     width:3,
            // },
            splitLine:{show:false},  // 关闭分割线的显示
            data:['周一','周一','周二','周三','周四','周五','周六','周日','']  // x轴显示的坐标数据
        },
        yAxis: {
            splitLine:{show:false},  // 关闭分割线的显示
            axisLine:{ show:true},  // 显示y轴轴线 
            axisTick:{show:true},  // 显示刻度
        },
        series: [  // 系列，一个对象为一个系列，在里面可以设置 类型，数据，等属性
            {
                type: 'line', data: [520, 850, 600, 810, 1200, 640,2100,2300], barWidth: '20px', smooth: true,
                z: 100, itemStyle: { color: 'rgba(4, 91, 214, 0.91)', borderRadius: 20 },
                // 设置区域填充样式
                areaStyle:{
                    color:{
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#ff1a1a' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'blue' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            },
        ],
        // 布局配置
        grid: { left: '10%', right: '10%', top: '10%', bottom: '10%' },
    })
})

</script>

<template>
    <div class="box4" ref="map">
        <div class="title">
            <p>未来 <span style="color: #4fcf4f;font-weight: bolder;">7</span> 天游客趋势图</p>
            <img src="/public/img/screen/dataScreen-title.png" alt="">
        </div>
        <div class="charts" ref="line"></div>
    </div>
</template>

<style scoped lang="scss">
.box4 {
    width: 100%;
    height: 100%;
    // background-color: red;
    background: url('/public/img/screen/dataScreen-main-cb.png') no-repeat;
    // background-size: calc(100% - 40px) 100%;
    color: white;
    font-size: 20px;
    margin: 0 20px;

    .title {
        margin-left: 20px;
    }

    .charts {
        width: 100%;
        // height: 260px;
        height: calc(100% - 40px);
    }
}
</style>